import React, { useEffect, useState } from "react";
import {
  DashboardOutlined,
  DatabaseOutlined,
  ShareAltOutlined,
  RocketOutlined,
  UserOutlined,
  SettingOutlined,
  SnippetsOutlined,
  ApartmentOutlined,
  DesktopOutlined,
} from "@ant-design/icons";
import { Menu } from "antd";
import { useNavigate, useLocation } from "react-router-dom";
import PubSub from "pubsub-js";
import { SubEvent } from "../../server/enum";
import "../index.less";
import Cache from "../../utils/Cache";

const rootSubmenuKeys = [
  "/storage",
  "/sharing",
  "/task",
  "/credentials",
  "/system",
];
const allMenus = [
  "/dashboard",
  "/storage/disks",
  "/storage/pools",
  "/network",
  "/sharing/files",
  "/sharing/protocol",
  "/sharing/snapshot-manage",
  "/task/snapshot-task",
  "/task/scrub-task",
  "/task/rsync-task",
  "/credentials/users",
  "/credentials/groups",
  "/credentials/directory",
  "/system/basic",
  "/system/logs",
  "/system/email",
  "/system/service",
  "/system/update",
  "/system/license",
  "/one-touch",
];

let menuSub = null;

const MenuList = () => {
  const [openKeys, setOpenKeys] = useState([""]);
  const [selectedKeys, setSelectedKeys] = useState([""]);
  const navigate = useNavigate();
  const location = useLocation();

  // componentDidMount
  useEffect(() => {
    setSelectedKeys([location.pathname]);
    // 监听其他页面发布的跳转事件
    menuSub = PubSub.subscribe(SubEvent.SWITCH_PAGE, (_, url) => {
      navigate(url);
      for (let k in allMenus) {
        if (url.indexOf(allMenus[k]) > -1) {
          setSelectedKeys([allMenus[k]]);
        }
      }
      let openKey = "/" + url.split("/")[1];
      if (rootSubmenuKeys.includes(openKey)) {
        setOpenKeys([openKey]);
      }
    });
    // 监听浏览器前进后退事件
    window.addEventListener("popstate", (e) => {
      for (let k in allMenus) {
        if (e.target["location"]["pathname"].indexOf(allMenus[k]) > -1) {
          setSelectedKeys([allMenus[k]]);
        }
      }

      let openKey = "/" + e.target["location"]["pathname"].split("/")[1];
      if (rootSubmenuKeys.includes(openKey)) {
        setOpenKeys([openKey]);
      }
    });

    return () => {
      PubSub.unsubscribe(menuSub);
    };
  }, []);

  const primaryClick = (item) => {
    navigate(item["key"]);
    setSelectedKeys([item["key"]]);
  };

  const onOpenChange = (keys) => {
    const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);
    if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      setOpenKeys(keys);
    } else {
      setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
    }
  };

  const list = [
    {
      key: "/base",
      icon: <DatabaseOutlined style={{ fontSize: "20px" }} />,
      label: "基础数据",
      children: [
        { key: "/base/member", label: "集体组织成员" },
        // { key: "/base/collective", label: "集体组织情况" },
      ],
    },
    {
      key: "/assets",
      icon: <DatabaseOutlined style={{ fontSize: "20px" }} />,
      label: "三资概况",
      children: [
        { key: "/assets/asset", label: "资产列表" },
        { key: "/assets/resources", label: "资源列表" },
        { key: "/assets/funds", label: "资金列表" }
      ],
    },
    {
      key: "/subsidies",
      icon: <DatabaseOutlined style={{ fontSize: "20px" }} />,
      label: "惠农补贴",
      children: [
        {
          key: "/subsidies/subsidy",
          icon: <DatabaseOutlined style={{ fontSize: "20px" }} />,
          label: "补贴数据",
          children: [
            { key: "/subsidies/subsidy/elderly", label: "高龄数据列表" },
            { key: "/subsidies/subsidy/ecological", label: "生态数据列表" },
            { key: "/subsidies/subsidy/internship", label: "暑假实习数据列表" },
            { key: "/subsidies/subsidy/immigration", label: "移民数据列表" },
            { key: "/subsidies/subsidy/farmland", label: "耕地数据列表" },
            { key: "/subsidies/subsidy/student", label: "大学生数据列表" },
            { key: "/subsidies/subsidy/employment", label: "就业数据列表" },
            {
              key: "/subsidies/subsidy/flexEmployment",
              label: "灵活就业数据列表",
            },
          ],
        },

        {
          key: "/subsidies/doubt",
          icon: <DatabaseOutlined style={{ fontSize: "20px" }} />,
          label: "补贴疑点数据",
          children: [
            {
              key: "/subsidies/doubt/illegalElderly",
              label: "违规高龄数据列表",
            },
            {
              key: "/subsidies/doubt/illegalEcological",
              label: "违规生态数据列表",
            },
            {
              key: "/subsidies/doubt/illegalInternship",
              label: "违规暑假实习数据列表",
            },
            {
              key: "/subsidies/doubt/illegalImmigration",
              label: "违规移民数据列表",
            },
            {
              key: "/subsidies/doubt/illegalFarmland",
              label: "违规耕地数据列表",
            },
            {
              key: "/subsidies/doubt/illegalStudent",
              label: "违规大学生数据列表",
            },
            {
              key: "/subsidies/doubt/illegalEmployment",
              label: "违规就业数据列表",
            },
            {
              key: "/subsidies/doubt/illegalFlexEmployment",
              label: "违规灵活就业数据列表",
            },
          ],
        },
        { key: "/subsidies/apply", label: "补贴申请" },
        { key: "/subsidies/summary", label: "补贴数据汇总" },
        { key: "/subsidies/violation", label: "补贴疑点数据汇总" },
      ],
    },
    {
      key: "/feedback",
      icon: <DatabaseOutlined style={{ fontSize: "20px" }} />,
      label: "反馈列表",
    },
  ];

  return (
    <Menu
      theme={"dark"}
      mode="inline"
      defaultOpenKeys={['/base', '/assets', '/subsidies']}
      selectedKeys={selectedKeys}
      // openKeys={openKeys}
      // onOpenChange={onOpenChange}
      onClick={primaryClick}
      items={list}
    />
  );
};

export default MenuList;
